<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>配电监控</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="#/runReport" style="cursor: pointer; color: #fff"
          >运行报表</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="flex2">
      <div class="select">
        <span>数据间隔：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
        <el-select
          v-model="value"
          placeholder="请选择"
          style="margin-left: 10px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <i class="el-icon-download" style="cursor: pointer"></i>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        cell-style="color:#fff"
        header-cell-style="color:#fff;background:rgb(27, 79, 133)"
      >
        <el-table-column label="时间"> </el-table-column>
        <el-table-column label="食堂电房 5#变压器温控仪">
          <el-table-column label="温度">
            <el-table-column label="A相温度(°C)"></el-table-column>
            <el-table-column label="B相温度(°C)"></el-table-column>
            <el-table-column label="C相温度(°C)"></el-table-column>
          </el-table-column>
          <el-table-column label="负荷率">
            <el-table-column label="1#变压器(%)"></el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="食堂电房 6#变压器温控仪">
          <el-table-column label="温度">
            <el-table-column label="A相温度(°C)"></el-table-column>
            <el-table-column label="B相温度(°C)"></el-table-column>
            <el-table-column label="C相温度(°C)"></el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="食堂电房 5A1">
          <el-table-column label="相电压">
            <el-table-column label="Ua(V)"></el-table-column>
            <el-table-column label="Ub(V)"></el-table-column>
            <el-table-column label="Uc(V)"></el-table-column>
          </el-table-column>
          <el-table-column label="线电压">
            <el-table-column label="Uab(V)"></el-table-column>
            <el-table-column label="Ubc(V)"></el-table-column>
            <el-table-column label="Uca(V)"></el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="食堂电房 5A2">
          <el-table-column label="电流">
            <el-table-column label="Ia(A)"></el-table-column>
            <el-table-column label="Ib(A)"></el-table-column>
            <el-table-column label="Ic(A)"></el-table-column>
          </el-table-column>
          <el-table-column label="相电压">
            <el-table-column label="Ua(V)"></el-table-column>
            <el-table-column label="Ub(V)"></el-table-column>
            <el-table-column label="Uc(V)"></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      tableData: [],
    };
  },
};
</script>

<style scoped>
.select {
  margin: 20px 0;
}

.el-select {
  width: 120px !important;
  /* border: 1px solid #fff !important; */
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  /* border: 1px solid #fff; */
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: transparent;
  color: #fff;
}

::v-deep .el-tree-node > .el-tree-node__content:hover {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #fff;
  background: rgb(27, 79, 133) !important;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #fff;
}
</style>